<script>

export default {
  name: 'WelcomeView',
  data () {
    return {
      dataObj: {
        userChange: 1,
        timeChange: 1
      },
      echartsObj: {
        userChange: 1
      },
      dataLoading: true,
      countData: {},
      loginInfo: {},
      echartsLoading: false,
      echartsOption: {
        barOption: {
          title: {
            text: '博客年度数据总结',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          xAxis: {
            type: 'category',
            data: ['2008', '2009', '2010']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            type: 'bar',
            data: [33, 55, 28]
          }, {
            type: 'line',
            data: [33, 55, 28]
          }]
        },
        pieOption: {
          title: {
            text: '博客分类占比图',
            subtext: '实时数据',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a}<br/>{b}:{c}({d}%)'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: '博客分类',
              type: 'pie',
              radius: '50%',
              data: [{
                name: 'HTML',
                value: 15
              }, {
                name: '穿越',
                value: 48
              }, {
                name: 'JAVA',
                value: 22
              }]
            }
          ]
        }
      }
    }
  },
  methods: {
    async getCountData () {
      this.dataLoading = true
      this.$axios.get('timeline/count', { params: this.dataObj }).then(data => {
        this.dataLoading = false
        this.countData = { ...data }
      }).catch(e => e)
    },
    async getEchartsData () {
      this.echartsLoading = true
      this.$axios.get('timeline/echarts', { params: this.echartsObj }).then(data => {
        this.echartsLoading = false
        this.echartsOption.pieOption.series[0].data = data.pieData.map(item => {
          return {
            name: item.name,
            value: item.value
          }
        })
        const barNames = [...data.barData.map(item => item.name)].reverse()
        const barValues = [...data.barData.map(item => item.value)].reverse()
        this.echartsOption.barOption.xAxis.data = barNames
        this.echartsOption.barOption.series[0].data = barValues
        this.echartsOption.barOption.series[1].data = barValues
      })
    },
    getLoginInfo () {
      this.$axios.get('login/info').then(data => {
        this.loginInfo = { ...data }
        this.dataObj.userChange = data.roleId
        this.echartsObj.userChange = data.roleId
        this.getCountData()
        this.getEchartsData()
      }).catch(e => e)
    }
  },
  created () {
    this.getLoginInfo()
  }
}
</script>

<template>
<el-card>
  <el-card v-loading="dataLoading" element-loading-text="拼命加载中..." element-loading-sinner="el-icon-loading">
    <div slot="header" class="card-title">
      <span class="title">数据统计</span>
      <el-form :model="dataObj" label-width="80px" inline>
        <el-form-item label="用户选择">
          <el-select :disabled="loginInfo.roleId === 2" v-model="dataObj.userChange" @change="getCountData">
            <el-option :value="1" label="全部用户"/>
            <el-option :value="2" label="当前用户"/>
          </el-select>
        </el-form-item>
        <el-form-item label="时间选择">
          <el-select v-model="dataObj.timeChange" @change="getCountData">
            <el-option :value="1" label="全部时间"/>
            <el-option :value="2" label="当天数据"/>
            <el-option :value="3" label="最近一周"/>
            <el-option :value="4" label="最近一个月"/>
            <el-option :value="5" label="最近三个月"/>
            <el-option :value="6" label="最近半年"/>
            <el-option :value="7" label="最近一年"/>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <el-row>
      <el-col :span="4"><el-card>博客总数：{{countData.blogCount}}</el-card></el-col>
      <el-col :span="4" :offset="1"><el-card>评论总数：{{countData.commentCount}}</el-card></el-col>
      <el-col :span="4" :offset="1"><el-card>分类总数：{{countData.categoryCount}}</el-card></el-col>
      <el-col :span="4" :offset="1"><el-card>标签总数：{{countData.tagCount}}</el-card></el-col>
      <el-col v-if="dataObj.userChange === 1" :span="4" :offset="1"><el-card>用户总数：{{countData.userinfoCount}}</el-card></el-col>
    </el-row>
  </el-card>
  <el-card v-loading="echartsLoading" element-loading-text="拼命加载中..." element-loading-sinner="el-icon-loading">
    <div slot="header" class="card-title">
      <span class="title">数据统计</span>
      <el-form :model="echartsObj" label-width="80px" inline>
        <el-form-item label="用户选择">
          <el-select :disabled="loginInfo.roleId === 2" v-model="echartsObj.userChange" @change="getEchartsData">
            <el-option :value="1" label="全部用户"/>
            <el-option :value="2" label="当前用户"/>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <el-row>
      <el-col style="height: 400px" :span="12">
        <v-chart :option="echartsOption.barOption"/>
      </el-col>
      <el-col style="height: 400px" :span="12">
        <v-chart :option="echartsOption.pieOption"/>
      </el-col>
    </el-row>
  </el-card>
</el-card>
</template>

<style scoped lang="scss">
.card-title{
  display: flex;
  align-items: center;
  justify-content: space-between;
  .el-form-item{
    margin-bottom: 0;
  }
}
</style>
